
import {  View } from '@tarojs/components'

import './index.scss'
import { AtButton, AtRadio } from 'taro-ui';
import GlobalFooter from '../../components/GlobalFooter/index'
import questions from '../../data/questions.json'
import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';

export default () => {

  // 使用下面这种方式，数据改变，页面动态渲染
  // 当前题目序号从1开始
  const [current,setCurrent] = useState<number>(1);
 // 当前题目
 const [currentQuestion,setCurrentQuestion] = useState(questions[0]);
 const questionOptions = currentQuestion.options.map((option)=>{
  return { label: `${option.key}. ${option.value}`, value: option.key }
})
// 当前回答
const [currentAnswer,setCurrentAnswer] = useState<string>();
// 回答列表
const [answerList] = useState<string[]>([]);
// 序号变化时，切换当前题目和当前回答
useEffect(()=>{
  setCurrentQuestion(questions[current-1]);
  setCurrentAnswer(answerList[current-1]);
},[current])
    return <View className='doQuestionPage'>
      {/* { JSON.stringify(answerList)} */}
    <View className='at-article__h2 title'>{current}、{ currentQuestion.title}</View>
    <AtRadio 
    options={questionOptions}
    value={currentAnswer}
    onClick={(value) =>{
      setCurrentAnswer(value);
      // 记录回答
      answerList[current-1] = value;
    }}
         />
      {current < questions.length && (<AtButton type='primary' circle disabled={!currentAnswer} className='controlBtn'
      onClick={()=>{
        setCurrent(current+1)
      }}
      >下一题</AtButton>)}
      {current === questions.length &&
      (<AtButton type='primary' circle className='controlBtn' onClick={()=>{
        // 传递答案
        Taro.setStorageSync('answerList', answerList);
        // 跳转到结果页
        Taro.navigateTo({url: '/pages/result/index'});
      }}>查看结果</AtButton>)}
      {current > 1 &&(<AtButton circle className='controlBtn'
      onClick={()=>{
        setCurrent(current-1)
      }}
      >上一题</AtButton>)}
      <GlobalFooter />
  </View>
};
